<script>
export default {
  name: 'search-bar',
  props: {
    placeholder: {
      type: String,
      default: '搜索商品名称'
    },
    showLogo: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    gotoSeach() {
      this.$router.push({
        name: 'search'
      })
    }
  }
}
</script>
<template>
  <div class="search-box">
    <slot name="right">
      <image v-if="showLogo" class="header-icon header-logo" style="width: 50px;height: 35px;" src="https://m.mi.com/component/header/img/logo_121d4a6.png"></image>
    </slot>
    <slot>
      <div type="text" class="search-input" @click="gotoSeach">
        <!--<image class="search-icon" style="width: 35px;height: 30px;" src="https://m.mi.com/component/header/img/search_df67e2f.png"></image>-->
        <text class="placeholder">{{placeholder}}</text>
      </div>
    </slot>
    <slot name="right">
      <image class="header-icon header-user" style="width: 35px;height: 42px;" src="https://m.mi.com/component/header/img/user_a70dc8e.png"></image>
    </slot>
  </div>
</template>
<style scoped>
.search-box {
  height: 100px;
  justify-content: space-between;
  flex-direction: row;
}

.search-input {
  height: 70px;
  flex: 2;
  background-color: #fff;
  flex-grow: 1;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  justify-content: center;
  margin-top: 10px;
  margin-top: 10px;
  margin-left: 30px;
  margin-right: 30px;
}

.placeholder {
  color: rgba(0, 0, 0, .3);
  font-size: 25px;
  margin-left: 20px;
}

.header-logo {
  margin-left: 20px;
  margin-top: 25px;
}

.header-user {
  margin-right: 20px;
  margin-top: 25px;
}
</style>
